<template>
  <div class="cart">
    <table>
      <thead>
        <tr>
          <th width="50">
            <!-- 
                未选中  icon-yduifuxuankuang     
                选中  icon-yduifuxuankuangxuanzhong
             -->
            <i
              @click="checkAllFn"
              :class="
                checkAll
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
              "
            ></i>
          </th>
          <th width="300">礼品信息</th>
          <th>兑换分数</th>
          <th>数量</th>
          <th>小计 (鸡腿)</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in goodsArr" :key="item.id">
          <td align="center">
            <i
              @click="oneSelect(index)"
              :class="
                item.ischecked
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
              "
            ></i>
          </td>
          <td align="center">
            <img
              class="goods_img"
              width="84"
              :src="'http://sc.wolfcode.cn' + item.coverImg"
              alt=""
            />
            <section>
              <div class="title ellipsis">{{ item.title }}</div>
              <div class="desc ellipsis">{{ item.versionDescription }}</div>
            </section>
          </td>
          <td align="center">{{ item.coin }}鸡腿</td>
          <td align="center">
            <div class="step tanxin">
              <div class="btn" @click="cutFn(index)">-</div>
              <div>{{ item.total }}</div>
              <div class="btn" @click="addFn(index)">+</div>
            </div>
          </td>
          <td align="center">{{ item.totalCost }}鸡腿</td>
          <td align="center">
            <div class="del" @click="delFn(index, item.id)">删除</div>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>总计 : <span>{{ allMoney }}鸡腿</span></h3>
    <div class="submit">提交</div>
  </div>
</template>

<script>
import { CartDataApi, CartDelApi  } from "@/request/api";
export default {
  data() {
    return {
        // 购物车数据数
        goodsArr: [],
        // 总价
        allMoney: 0,
        // 全选状态
        checkAll: false,
    };
  },
  methods: {
    // 步进器 -
    cutFn(index) {
        if (this.goodsArr[index].total <= 1) {
            return;
        }
        this.goodsArr[index].total--;
        this.goodsArr[index].totalCost = this.goodsArr[index].coin * this.goodsArr[index].total;
        this.countMoney();
    },
    // 步进器 +
    addFn(index) {
        this.goodsArr[index].total++;
        this.goodsArr[index].totalCost = this.goodsArr[index].coin * this.goodsArr[index].total;
        this.countMoney();
    },
    // 删除
    delFn(index, id) {
        this.goodsArr.splice(index, 1);
        this.countMoney();
        CartDelApi({ id }).then((res) => {
            // console.log(res);
            if (res.data.code == 0) {
                let obj = { content: "删除成功！", icon: "success" };
                this.$store.dispatch("AsyncToast",obj)
            }
        })
        // 更新vuex中的购物车数量
        // console.log("arr length"+this.goodsArr.length);
        this.$store.commit('changeCartTotal',this.goodsArr.length);
        this.$emit('updateKeyFn');
    },
    
    // 单向的点击
    oneSelect(index) {
        this.goodsArr[index].ischecked = !this.goodsArr[index].ischecked;
        // console.log(this.goodsArr);

        let sum = 0;
        this.goodsArr.map((item) => {
            if (item.ischecked) {
                sum++;
            }
        });

        // 修改全选的状态
        this.checkAll = sum >= this.goodsArr.length;
        this.countMoney(); // 计算总价

        // 数据更新了，视图没有更新
        this.$forceUpdate(); // 强制更新
    },
    // 全选按钮点击
    checkAllFn() {
        this.checkAll = !this.checkAll;
        this.goodsArr.map((item) => {
            item.ischecked = this.checkAll;
        });
        this.countMoney(); // 计算总价
    },

    // 计算总价
    countMoney() {
        this.allMoney = 0;
        this.goodsArr.map((item) => {
            if (item.ischecked) {
                this.allMoney += item.totalCost;
            }
        })
    }
  },
  // 获取购物车数据
  created() {
    CartDataApi().then((res) => {
      if (res.data.code === 0) {
        this.goodsArr = res.data.data;
        // console.log(this.goodsArr);
        this.goodsArr.forEach((item) => {
            item.ischecked = false; // 给每一项都添加一个ischecked的属性， 用来让选框选中
        });
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.cart {
  table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    thead {
      background: #efefef;
      th {
        padding: 20px 0;
        font-weight: bold;
      }
    }
    i {
      cursor: pointer;
      &.icon-yduifuxuankuangxuanzhong {
        color: @blue;
      }
    }
    tbody {
      tr {
        td {
          padding: 20px 0;
          vertical-align: middle;
          .goods_img {
            float: left;
          }
          section {
            float: left;
            margin-left: 10px;
            padding-top: 20px;
            .title {
              margin-bottom: 20px;
            }
            .desc {
              font-size: 14px;
              color: #666;
            }
          }
          .step {
            background: #fff;
            width: 105px;
            .btn {
              width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              border: 1px solid #dddddd;
              box-sizing: border-box;
              color: #999999;
              user-select: none;
            }
            div {
              width: 45px;
              border: 0;
              height: 30px;
              line-height: 30px;
              box-sizing: border-box;
              border-top: 1px solid #dddddd;
              border-bottom: 1px solid #dddddd;
              text-align: center;
            }
          }
          .del {
            padding: 5px 10px;
            display: inline;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
          }
        }
      }
    }
  }
  h3 {
    text-align: right;
    font-size: 20px;
    color: #000;
    margin-top: 20px;
    margin-bottom: 20px;
    span {
      color: @orange;
    }
  }
  .submit {
    background: @blue;
    color: #fff;
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 100px;
    float: right;
    cursor: pointer;
  }
}
</style>